<template>
  <div class="confirm-popover">
    <el-popover
                :itemName="itemName"
                :trigger="trigger"
                :placement="placement"
                :width="width"
                v-model="visible">
      <el-form-item :label="itemName" >
        <el-input v-if="type === 'input'" :placeholder="itemName" v-model="formItem" />
        <el-select v-if="type === 'select'" v-model="formItem" clearable :placeholder="itemName" style="width: 120px">
          <el-option
              v-for="item in selectItem"
              :key="item.value"
              :label="selectLabelProperty ? item.label[selectLabelProperty] : item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <div style="text-align: right; margin: 0">
        <el-button type="text" size="mini" @click="visible = false">
          取消
        </el-button>
        <el-button type="danger" size="mini" @click="confirm()">确定</el-button>
      </div>
      <div slot="reference" id="reference"><slot></slot></div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "SingleItemFormPopover",
  props: {
    type: {
      Type: String,
      default: 'input'// select
    },
    itemName: {
      type: String,
      default: '参数'
    },
    trigger: {
      type: String,
      default: 'click'
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    width: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String | Number,
      default: 150
    },
    selectItem: Array,
    selectLabelProperty: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      visible: false,
      formItem: ''
    }
  },
  methods: {
    confirm() {
      this.$emit('onSubmit', this.formItem);
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">

.confirm-popover, #reference {
  display: inline;
}

.el-icon-question:before {
  font-size: 16px;
  margin-right: 2px;
  color: orange;
}


</style>
